/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/10/3 2:54 下午
 * @version V1.0
 */

import React, { useRef } from 'react';
import { Input, Form, Button, Row, Col, Card, message } from 'antd';
import UploadImg from 'components/UploadImg';
import { history } from 'umi';
import {
    reqCreateEntry
} from 'api/index';

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const { Item } = Form;
const CreateCategory = () => {
    const [form] = Form.useForm();
    const iconRef = useRef();
    const submit = () => {
        const icon = iconRef.current.cbImgRef();
        if (icon.length === 0) {
            message.warn('请上图标');
            return;
        }

        form.validateFields().then(async values => {
            values.icon = icon[0].url;
            const result = await reqCreateEntry(values);
            if (result.status === 1) {
                history.push('/category-manage/e-category/list');
            } else {
                message.error(result.message);
            }
        }).catch(info => {
        });
    };
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="分类名称"
                            name="name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入分类名称"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="链接地址"
                            name="web_link"
                            // rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入分类名称"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="图标"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={iconRef}
                                max={1}
                                isCropper={false}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
};

export default CreateCategory;
